<template>
  <z-radio-group v-model:value="placement" style="margin-right: 8px">
    <z-radio value="top">top</z-radio>
    <z-radio value="right">right</z-radio>
    <z-radio value="bottom">bottom</z-radio>
    <z-radio value="left">left</z-radio>
  </z-radio-group>
  <z-button type="primary" @click="showDrawer">Open</z-button>
  <z-drawer
    :width="500"
    title="Basic Drawer"
    :placement="placement"
    :visible="visible"
    @close="onClose"
  >
    <template #extra>
      <z-button style="margin-right: 8px" @click="onClose">Cancel</z-button>
      <z-button type="primary" @click="onClose">Submit</z-button>
    </template>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </z-drawer>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const placement = ref('left')
    const visible = ref(false)

    const showDrawer = () => {
      visible.value = true
    }

    const onClose = () => {
      visible.value = false
    }

    return {
      placement,
      visible,
      showDrawer,
      onClose
    }
  }

})
</script>
